// section - 分块

.e-section {
    padding: 0;
    margin: 0 0 2rem 0;

    &.e-section--space-sm {
        margin-bottom: 1rem;
    }
    &.e-section--space-lg {
        margin-bottom: 2.5rem;
    }
    .e-section-heading,
    .e-section-title {
        display: block;
        font-size: 1.3rem;
        font-weight: 500;
        padding: 0;
        margin: 0 0 1.75rem 0;
        color: e-base-color(label, 4);

        &.e-section-title-sm {
            font-size: 1.1rem;
        }

        &.e-section-title-md {
            font-size: 1.4rem;
        }

        &.e-section-title-lg {
            font-size: 1.5rem;
        }
    }

    .e-section-desc {
        display: block;
        font-size: 1rem;
        font-weight: 400;
        padding: 0;
        margin: 0 0 1rem 0;
        color: e-base-color(label, 3);
    }

    .e-section-info {
        display: block;
        font-size: 1rem;
        padding: 0;
        margin: 0 0 1rem 0;
        color: e-base-color(label, 3);
    }

    .e-section-content {
        display: block;
        padding: 0;
        margin: 0;

        &.e-section-content--border {
            padding: 1.5rem;
            border: 3px solid e-base-color(grey, 2);

            @include e-rounded {
                border-radius: $e-border-radius;
            }
        }

        &.e-section-content--solid {
            padding: 1.5rem;
            border-left: 4px solid e-base-color(grey, 3);
            background-color: e-base-color(grey, 1);

            @include e-rounded {
                border-radius-top-left: $e-border-radius;
                border-radius-top-right: $e-border-radius;
            }
        }
        &.e-section-content--fit {
            padding: 0;
        }
    }

    &.e-section--last {
        margin-bottom: 0;
    }

    &.e-section--first {
        margin-top: 0;
    }
}